<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* input[type="radio"]:checked~label {
            color:red;
        }
        input[type="checkbox"]:checked ~ label{
            color:green;
        }
        div[class^=icon]{
            color: pink;
        }
        div[class$=a]{
            color: red;
        }
        div[class*=a]{
            color: red;
        }
        ul :first-child {
            background-color: red;
        }
        ul li:last-child {
            background:red;
        }
        ul li:nth-child(2){
            background: red;
        }
        ul li:nth-child(even){
            background: grey;
        }
        ul li:nth-child(odd){
            background: pink;
        }
        ol li:nth-child(n){
            background: pink;
        }
        section div:nth-of-type(1){
            color:red;
        }
        div::before {
            content: "w我";
        }
        img {
            width: 200px;
            height: 200px;
            filter: blur(5px);
            transition: width,height .5s;
            /* transition: height .5s; */
        /* } */
        /* img:hover {
            filter: blur(0px);
            width: 400px;
            height: 400px;
        } */ 
        .jindutiao {
            width: 100px;
            height: 15px;
            border:1px solid red;
            border-radius: 7px;
        }
        .jindu {
            width: 50%;
            height: 15px;
            background-color: red;
            transition: all 1s;       
        }
        .jindutiao:hover .jindu{
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- <form action="get">
        <fieldset>
            <legend>整个表单</legend>
        
        <fieldset>
            <legend>用户名</legend>

            <div class="form-example">
                <label for="name">用户名：</label>
                <input type="text" name="name" id="name" required>
            </div>
         </fieldset> -->
        <!-- <fieldset> -->
            <!-- <legend>邮箱</legend>
            <div class="for-example">
                <lable for="email">邮箱： </lable>
                <input type="email" name="email" id="email" required>
            </div>
            <div class="for-example">
                <input type="submit" value="提交">
            </div> -->
        <!-- </fieldset> -->
        <!-- <fieldset> -->
            <!-- <legend>单选</legend>
            <input type="radio" name="sex" value="男" id="nan" checked>
            <label for="nan">男：</label>
            <input type="radio" name="sex" value="女" id="nv">
            <label for="nv">女：</label> -->
            
        <!-- </fieldset>
        <fieldset> -->
            <!-- <legend>多选框</legend>
            <span>
            <input type="checkbox" name="aihao" value="爬山" id="pashan" checked>
            <label for="pashan">爬山</label>
        </span>
        <span>
            <input type="checkbox" name="aihao" value="音乐" id="music">
        
            <label for="music">音乐</label>
        </span>
        <span>
            <input type="checkbox" name="aihao" value="读书好" id="read">
            <label for="read">读好书</label>
        </span> -->
        <!-- </fieldset> -->
        <!-- <input type="file">上传
        <br>
        <input type="number" min="1" max="5">数字
        <br>
        <input type="url">网络地址
        <br>
        <input type="ranfe">范围型
        <br>
        <input type="range" name="ppoints" min="1" max="100" value="30" id="">
        <br>
        <input type="datatime">日期
        <br>
        <input type="color">颜色
        <br>
        <input type="search">搜索
        <br>
        <input type="hidden" value="这是要传递的数据">隐藏域
        <br>
        <button type="button" value="普通按钮">普通按钮</button>
        <br>
        <button type="reset">重置</button>
        <br>
        <input type="text" list="dList" value="IE">浏览器
        <datalist id="dList" >
            <option value="IE"></option>
            <option value="Chrome" checked></option>
            <option value="Firefox"></option>
            <option value="Edge"></option>
        </datalist>
        <br>
        地点
        <select name="cities" id="cities" >
            <option value="上海" selected>上海</option>
            <option value="北京">北京</option>
            <option value="重庆">重庆</option>
            <option value="四川">四川</option>
        </select>
        <br>
        <textarea name="wenzi" id="wenzi" cols="30" rows="10">
            你好
        </textarea>
        <br>
        进度条
        <progress value="25" max="100"></progress>
        <br>
        <input type="submit">
        <div class="icon1">1</div>
        <div class="icon2">2</div>
        <div class="icon3">3</div>
        <div class="icon4">4</div>
        <div class="ba">5</div>
        <div class="aa">6</div>
        <div class="ca">7</div>
        <ul>
            <li>7</li>
            <li>7</li>
            <li>7</li>
            <li>7</li>
            <li>7</li>
            <li>7</li>
            <li>7</li>
        </ul>
        <ol>
            <li>7</li>
            <li>7</li>
            <li>7</li>
            <li>7</li>
            <li>7</li>
            <li>7</li>
            <li>7</li>
        </ol>
        <section>
            <p>光头强</p>
            <div>熊大</div>
            <div>熊二</div>
        </section>
        <div>是</div>
        <img src="https://img1.baidu.com/it/u=1751354908,3486094499&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666544400&t=b9b121bfeb69851c26390b99abff5b9a" alt=""> --> 
        <div class="jindutiao">
            <div class="jindu">

            </div>
        </div>
    <!-- </fieldset>
    </form> -->

</body>

</html>